---
title: Popover
description: A small, floating UI element that appears near a trigger to show contextual information or actions.
order: 4
published: true
references: ["https://react-spectrum.adobe.com/react-aria/Popover.html#props"]
---

## Basic
Popovers are small overlays that display additional information about an element when the user clicks on it.
<How toUse="overlays/popover/popover-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/popover
```

## Composed components
<Composed components={['button', 'dialog']}/>

## Manual installation

```bash
npm i react-aria-components
```

<SourceCode toShow='popover'/>

## Anatomy
```
import {
  Popover,
  PopoverBody,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverFooter,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"
import { Dialog } from "@/components/ui/dialog"
```

```
<Popover>
  <PopoverTrigger>Open Popover</PopoverTrigger>
  <PopoverContent>
    <Dialog>
      <PopoverHeader>
        <PopoverTitle>Popover Title</PopoverTitle>
        <PopoverDescription>Popover Description</PopoverDescription>
      </PopoverHeader>
      <PopoverBody>Popover Body</PopoverBody>
      <PopoverFooter>
        <PopoverClose>Close</PopoverClose>
        <PopoverClose>Confirm</PopoverClose>
      </PopoverFooter>
    </Dialog>
  </PopoverContent>
</Popover>
```

## Controlled
You can control the popover programmatically.
<How toUse="overlays/popover/popover-controlled-demo" />

## Overlay arrow
Popovers come with an arrow that points to the trigger element, but it’s hidden by default. To display it, pass the `arrow` prop.
<How toUse="overlays/popover/popover-arrow-demo" />

## Placement
You can change the placement of the popover by passing the `placement` prop.
<How toUse="overlays/popover/popover-placement-demo" />

The list above shows the primary directions, but you can also use specific placements like `bottom left` or `top right`. Here are all the available placement options:

| Primary Direction | Placement                                                             |
|-------------------|-----------------------------------------------------------------------|
| `bottom`          | `bottom`, `bottom left`, `bottom right`, `bottom start`, `bottom end` |
| `top`             | `top`, `top left`, `top right`, `top start`, `top end`                |
| `left`            | `left`, `left top`, `left bottom`                                     |
| `start`           | `start`, `start top`, `start bottom`                                  |
| `right`           | `right`, `right top`, `right bottom`                                  |
| `end`             | `end`, `end top`, `end bottom`                                        |


## Custom close
You can easily close the popover by clicking outside of it, or add a custom close button inside using Popover.Close. Just make sure everything is wrapped inside a `Dialog`.
<How toUse="overlays/popover/popover-custom-close" />

## Popover trigger
All the examples above use `<Button/>` as the trigger, but what if you wanna switch it up, like using `<Avatar/>` instead? No sweat, just roll with PopoverTrigger like this:
<How toUse="overlays/popover/popover-trigger-demo" />
